<template>
  <view class="max_box">
    <AddTips></AddTips>
    <view class="box">
      <view class="img_box">
        <image class="img" :src="`${baseUrl}/images/brand/${groupInfo[1].logoUlr}`" mode="center"></image>
      </view>
    </view>
    <!-- 首页图标导航 -->
    <swiper class="swiper" indicator-dots>
      <swiper-item v-for="item1 in homeNvaList" :key="item1.id">
        <view class="heme_nav_box">
          <view class="item_nav" v-for="item2 in item1.page" :key="item2.id" @click="toDetailPage(item2.url)">
            <view class="img_box">
              <image class="img" :src="item2.iconPath"></image>
            </view>
            <view class="text">{{ item2.title }}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <!-- 公司视频 -->
    <view class="video_box" v-if="groupInfo[1].video_url">
      <video autoplay controls id="myVideo" :muted="true" page-gesture show-mute-btn vslide-gesture class="videoCss"
        :src="`${baseUrl}/video/brand/${groupInfo[1].video_url}`"></video>
    </view>
    <view class="about_us">
      <view class="about_us_box">
        <view class="home_logo">
          <view class="leftLien"></view>
          <view class="content_box">
            <view class="comName">锦龙汽车集团</view>
            <view class="subhead">Kam Lung Motor Group</view>
          </view>
          <view class="logo_box">
            <image class="logo" mode="widthFix" :src="`${baseUrl}/images/brand/${groupInfo[0].logoUlr}`"></image>
          </view>
        </view>
        <!-- 富文本编辑 -->
        <view class="text_box">
          {{ groupInfo[0].info }}
          <!-- <mp-html :content="groupInfo[0].info" /> -->
        </view>
      </view>
      <view class="about_us_box">
        <view class="home_logo">
          <view class="leftLien"></view>
          <view class="content_box">
            <view class="comName">ZEEKR体验中心</view>
          </view>
        </view>
        <view class="text_box">
          {{ groupInfo[1].info }}
        </view>
      </view>
    </view>
    <!-- 体验中心 -->
    <view class="branch_title">{{ brandsTitle }}</view>
    <view class="scroll_box">
      <view class="scroll_title">经销商
        <view class="move" @click="pickeShow = true">
          <text class="text">{{ area }}</text>
          <uni-icons size="26rpx" type="icon-xiala" custom-prefix="iconfont"></uni-icons>
        </view>
      </view>
      <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="128">
        <view :key="item.id" class="scroll-view-item_H" v-for="item in companyList"
          @click="goDetailPage(item.company_id)">
          <view class="img_box">
            <image class="img" :lazy-load="true" mode="aspectFill" :src="item.image"></image>
          </view>
          <view class="name">{{ item.company_name }}</view>
          <view class="phone">{{ item.sale_hotline }}</view>
          <view v-if="item.distance" class="distance">(距您 {{ item.distance }} km)</view>
        </view>

      </scroll-view>
    </view>
    <view class="new_active" @click.stop="goDetailPa(activeList[0])">
      <view class="title">
        最新活动
        <view class="more" @click.stop="toMore('/News/ActiveList')">
          <text>查看更多</text>
          <uni-icons type="right" color="#999" size="26rpx"></uni-icons>
        </view>
      </view>
      <template v-if="activeList[0].cover_img">
        <view class="new_title">{{ activeList[0].title }}</view>
        <image :lazy-load="true" :src="`${baseUrl}/images/news/${activeList[0].cover_img}`" mode=""></image>
      </template>
      <view class="no-data" v-else> 暂无数据</view>
    </view>
    <!-- 新闻列表组件 -->
    <view class="read_news">
      <view class="read_news_title">新闻看点</view>
      <NewsItem :activeList="newsList"></NewsItem>
    </view>
    <view class="more_news" @click="toMore('/News/NewList')">更多新闻</view>
    <!-- <view style="height: 20px"></view> -->
    <u-picker :show="pickeShow" keyName="region" :columns="areaList" closeOnClickOverlay confirmColor="#de4141"
      :immediateChange="true" @confirm="pickerChange" @cancel="pickeShow = false"></u-picker>
    <view class="Contact" @click="goContact">
      <text class="iconfont2 icon-wodekefu"></text>
    </view>
  </view>
</template>
<script>
import { mapState } from 'vuex'
import { newsListApi } from '@/API/reqNews'
import { setCentersList } from '@/utils/utils'
import { homeNvaList } from '@/static/js/staticData'
import { companyListApi, brandAreaList } from '@/API/reqData'
export default {
  data() {
    return {
      area: '全部',
      pickeShow: false,
      brandsTitle: '',
      scrollTop: 60,
      // 基础路径
      baseUrl: this.$baseUrl,
      // 公司列表
      companyList: [],
      // 公司列表
      getCompanyListParma: {
        state: 1,
        brand_id: '',
        region_id: '',
        page: 1,
        pageSize: 20,
        company_type: 1
      },
      // 新闻与活动请求参数
      newsPram: {
        type: 1,
        brand_id: [1],
        state: 1,
        page: 1,
        pageSize: 10
      },
      // 新闻列表
      newsList: [],
      areaList: [[{ id: '', region: '全部' }]],
      // 活动列表
      activeList: [],
      homeNvaList,
      companyList: []
    }
  },
  onLoad() {
    let { brand_id } = this.brandInfo
    this.getCompanyListParma.brand_id = brand_id
    this.newsPram.brand_id.push(brand_id)
    // 品牌服务公司
    this.companyListFn()
    // 获取新闻列表
    this.getNewsList(1, 5)
    // 获取活动列表
    this.getNewsList(2, 1)
    // 品牌对应的地区列表
    this.getBrandAreaList(brand_id)
  },
  onShow() {
    uni.showTabBar()
  },
  methods: {
    // 到公司详情页
    goDetailPage(id) {
      uni.navigateTo({ url: `/pages/StorePage/StoreDetails?compaId=${id}` })
    },
    // 跳转到相应页面
    toDetailPage(url) {
      uni.navigateTo({ url })
    },
    // 公司列表
    async companyListFn() {
      const {
        data: { data }
      } = await companyListApi(this.getCompanyListParma)

      let base = `${this.baseUrl}/images/company/4s/`
      let temp = data
        .map(item => {
          if (item.company_list.length > 0) {
            let { id, company_id, company_name, crm_company_id } = item
            let { latitude, longitude, sale_hotline, company_images } = item.company_list[0]
            return {
              id,
              latitude,
              longitude,
              company_id,
              sale_hotline,
              company_name,
              distance: null,
              crm_company_id,
              image: `${base}${company_images}`,
            }
          }
        })
      let { latitude, longitude } = this.latLog
      if (latitude) {
        this.companyList = setCentersList(temp, longitude, latitude)
      }
      this.companyList = temp
    },
    // 新闻与活动列表
    async getNewsList(type = 1, pageSize = 1) {
      this.newsPram.type = type
      // this.newsPram.state = state
      this.newsPram.pageSize = pageSize
      const {
        data: { data }
      } = await newsListApi(this.newsPram)
      if (type == 1) {
        this.newsList = data
      } else {
        this.activeList = data
      }
    },
    // 详情页
    goDetailPa(e) {
      if (e.wx_link !== '') {
        // let info = { src: e.wx_link, title: '活动详情' }
        // wx.navigateTo({
        //   url: `/pages/goVaPage?info=${encodeURIComponent(
        //     JSON.stringify(info)
        //   )}`,
        // })
        wx.navigateTo({
          url: `/pages/goVaPage?info=${e.wx_link}`
        })
      } else {
        uni.navigateTo({
          url: `/News/NewsDetails?item=${e.id}`
        })
      }
    },
    // 更多新闻与活动
    toMore(url) {
      uni.navigateTo({ url: `${url}` })
    },
    // 到客服列表
    goContact(type) {
      uni.navigateTo({ url: `/pages/Service/ServiceList` })
    },
    // 品牌对应的地区列表
    async getBrandAreaList(brand_id) {
      const {
        data: { result }
      } = await brandAreaList({ brand_id })
      this.areaList[0] = [{ id: '', region: '全部' }, ...result]
    },
    // 选择地区列表
    pickerChange({ value }) {
      this.area = value[0]?.region
      this.getCompanyListParma.region_id = value[0]?.id
      this.companyListFn()
      this.pickeShow = false
    }
  },
  computed: {
    ...mapState(['latLog', 'brandInfo', 'groupInfo'])
  }
}
</script>
<style>
page {
  background-color: #fafafa;
}
</style>
<style scoped lang="scss">
@import '@/styles/mixins.scss';

.video_box {
  margin: 15rpx 0;
  border-radius: 12rpx;

  .videoCss {
    width: 100%;
    border-radius: 6rpx;
  }
}

.max_box {
  // margin: 0 30rpx;
  margin-bottom: 30rpx;
  padding-bottom: 30rpx;

  .box {
    margin: 24rpx auto;
    // background-color: #fff;
    width: 93%;
    background-color: #fafafa;
    // background: #f7f7f7;
    box-shadow: $theme-shadow2;
    border-radius: 16rpx;

    .img_box {
      width: 100%;
      height: 240rpx;
      box-sizing: border-box;
      border: 2rpx solid #f1f1f1;
      border-radius: 16rpx;
      background-color: #fff;
      overflow: hidden;
      padding: 30rpx 30px;

      .img {
        width: 100%;
        height: 100%;
        // margin-top: -1.5%;
      }
    }
  }

  .swiper {
    height: 410rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    box-shadow: $theme-shadow;
  }

  .heme_nav_box {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 30rpx 0;
    // padding: 20rpx;
    padding: 24rpx;

    .item_nav {
      padding: 16rpx 0;
      width: 33.33%;
      margin: 0;
      text-align: center;
      color: #f00;

      .img_box {
        margin: 0px auto;
        width: 78rpx;
        height: 78rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        margin-top: 15rpx;
        font-size: 28rpx;
        color: $title-color;
      }
    }
  }

  .branch_title {
    text-align: center;
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    line-height: 100rpx;
    margin-top: 30rpx;
    background-color: #fff;
    // box-shadow: $theme-shadow;
  }

  .about_us {
    background-color: #fff;
    box-shadow: $theme-shadow;
    padding: 36rpx;
    margin-bottom: 40rpx;

    .about_us_box {
      margin-top: 20rpx;

      &:nth-of-type(2) {
        margin-top: 40rpx;

        .home_logo .leftLien {
          height: 34rpx;
          border-radius: 30%;
        }
      }

      .title {
        font-size: 32rpx;
        color: $theme-color;
        font-weight: 600;
        line-height: 60rpx;
      }

      .home_logo {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;

        .leftLien {
          width: 9.4rpx;
          height: 56rpx;
          border-radius: 26%;
          background-color: $klm-color;
        }

        .content_box {
          padding-left: 20rpx;
          // background-color: #ddd;
          width: 338rpx;

          .comName {
            font-size: 38rpx;
            color: #111;
            font-weight: 500;
          }

          .subhead {
            font-size: 24rpx;
            // font-family: 'Audi-font';
            // font-weight: 200;
            color: #666;
          }
        }

        .logo_box {
          flex: 1;

          .logo {
            width: 100%;
          }
        }
      }

      .text_box {
        width: 100%;
        white-space: pre-line;
        padding-left: 16rpx;
        padding-right: 10rpx;
      }

      // .text {
      //   font-size: 26rpx;
      //   line-height: 46rpx;
      //   color: $title-color;
      // }
    }
  }

  // 体验中心
  .scroll_box {
    padding: 36rpx 30rpx 0;
    background: #fff;
    margin: 30rpx 0 0;
    background-color: #fff;
    box-shadow: $theme-shadow;

    .scroll_title {
      margin-bottom: 30rpx;
      position: relative;
      font-size: 34rpx;
      color: $title-color;
      font-weight: 600;
      line-height: 40rpx;
      text-align: left;

      .move {
        font-size: 26rpx;
        font-weight: 400;
        color: #999;
        position: absolute;
        top: 0;
        right: 5rpx;

        .text {
          padding-right: 5rpx;
        }
      }
    }

    .scroll-view_H {
      white-space: nowrap;
      width: 100%;
      // height: 180px;
      padding: 0 0 10rpx 0;

      .scroll-view-item_H {
        margin: 0 20rpx 20rpx 0;
        padding-bottom: 20rpx;
        width: 40%;
        text-align: center;
        font-size: 36rpx;
        display: inline-block;
        background-color: #fafafa;
        border-radius: 12rpx;
        border: 3rpx solid rgba(0, 0, 0, 0.05);

        .img_box {
          height: 200rpx;

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .name {
          margin-top: 10rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: $title-color;
        }

        .phone {
          font-size: 26rpx;
          line-height: 38rpx;
          color: $theme-color;
        }

        .distance {
          font-size: 22rpx;
          line-height: 30rpx;
          color: #666;
        }
      }
    }
  }

  .new_active {
    margin: 30rpx 0rpx;
    padding: 36rpx;
    background-color: #fff;
    box-shadow: $theme-shadow;

    .title {
      margin-bottom: 26rpx;
      font-size: 34rpx;
      color: $title-color;
      font-weight: 600;
      // line-height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .more {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        font-weight: 500;
        // line-height: 60rpx;
        color: #999;
      }
    }

    .new_title {
      margin-bottom: 20rpx;
      font-size: 28rpx;
      color: #555;
      @include text-ellipsis();
    }

    image {
      border-radius: 6rpx;
    }

    .no-data {
      text-align: center;
      line-height: 80rpx;
      color: #999;
    }
  }

  // 新闻看点
  .read_news {
    background-color: #fff;
    box-shadow: $theme-shadow;
    padding-bottom: 10rpx;
    margin-bottom: 20rpx;

    .read_news_title {
      margin: 30rpx 0rpx 26rpx;
      padding: 36rpx 36rpx 0;
      // margin-bottom: 26rpx;
      // padding: 0;
      font-size: 32rpx;
      color: $title-color;
      font-weight: 600;
      // line-height: 60rpx;
    }
  }

  .Contact {
    width: 70rpx;
    height: 70rpx;
    position: fixed;
    right: 30px;
    bottom: 60px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;

    .iconfont2 {
      font-size: 50rpx;
      color: #fafafa;
    }
  }
}

.more_news {
  margin: 20rpx auto 36rpx;
  width: 96%;
  font-size: 28rpx;
  text-align: center;
  background: #eeeeee;
  padding: 20rpx 0;
}
</style>
